<template>
  <div class="server" :class="[data.color]">
    <div class="num">{{index + 1}}</div>
    <div class="round round1" :class="[data.color]" :style="getRoundStyle()"></div>
    <div class="round round2" :class="[data.color]" :style="getRoundStyle()"></div>
    <div class="danger" v-if="data.color == 'red'"></div>
  </div>
</template>

<script>
import config from 'assets/config'
import {randint, contain} from 'utils/random'

const colors = config.levelColors

export default {
  name: 'server',
  props: ['index', 'data'],
  methods: {
    getRoundStyle(){
      var out = {}
      var second = randint(12, 28) / 10
      var func = randint(1) ? 'ease' : 'linear'
      out.animation = `randomRotate${randint(1,4)} ${second}s ${func} infinite alternate`
      return out;
    }
  }
}
</script>

<style scoped>
.server{
  width: 11.11vh;
  height: 11.11vh;
  background-size: 100% 100%;
  position: relative;
}
.server.red{
  background-image: url(./img/main-block-5-server-red.png)
}
.server.blue{
  background-image: url(./img/main-block-5-server-blue.png)
}
.server.yellow{
  background-image: url(./img/main-block-5-server-yellow.png)
}
.num{
  font-size: 1.92vh;
  color: white;
  position: absolute;
  left: .95vh;
  bottom: .25vh;
}
.round{
  position: absolute;
  background-size: 100% 100%;
}
.round.red{
  background-image: url(./img/main-block-5-round-red.png);
}
.round.yellow{
  background-image: url(./img/main-block-5-round-yellow.png);
}
.round.blue{
  background-image: url(./img/main-block-5-round-blue.png);
}
.round1{
  width: 8.15vh;
  height: 8.15vh;
  left: 1.5vh;
  top: 1.5vh;
}
.round2{
  width: 6.85vh;
  height: 6.85vh;
  left: 2.15vh;
  top: 2.15vh;
}
.danger{
  width: 6.02vh;
  height: 6.11vh;
  background: url(./img/main-block-5-danger.png);
  background-size: 100% 100%;
  top: 2.5vh;
  left: 2.5vh;
  position: absolute;
  filter: drop-shadow(0 0 18px #ff4a21);
  animation: blink .6s ease-in infinite alternate;
}
</style>
